<template>
	<view>
		<image src="/static/img/my/msg_bg.png" class="w-max pa top0" mode="widthFix"></image>
		<u-navbar :is-back="true" :border-bottom="false" title="消息" title-bold :is-fixed="false"
			:background="{background:'#0000'}">
			<view class="pr20 pl20 flex w-max row-right z-index2">
				<view class="color-666" @click="clearShow=true">全部清除</view>
			</view>
		</u-navbar>
		<view class="p20 pr">
			<block v-for="(item,index) in msgList" :key="index">
				<view class="flex pb28 pt28" @click="$u.route('/pages/my/msg/system')">
					<view class="pr w84 h84">
						<u-avatar :src="item.icon" size="84" />
						<u-badge size="mini" :count="item.count" type="error" is-center />
					</view>
					<view class="w-max h84 ml20 flex-col row-between ov-h">
						<view class="flex">
							<view class="flex1 u-line-1 fs30">{{item.title}}</view>
							<view class="fs24 color-666">{{item.time}}</view>
						</view>
						<view class="u-line-1 fs24 color-999">{{item.content||'暂时没有新的消息哦~'}}</view>
					</view>
				</view>
				<view class="ml104 h2 bg-f5f"></view>
			</block>
			<block v-for="(item,index) in list" :key="index">
				<view class="flex pb28 pt28" @click="$goChat({to_id:item.to_id,to_identify:item.to_identify})">
					<view class="pr w84 h84">
						<u-avatar :src="item.avatar||''" size="84" />
						<u-badge size="mini" :count="item.count" type="error" is-center />
					</view>
					<view class="w-max h84 ml20 flex-col row-between ov-h">
						<view class="flex">
							<view class="flex1 u-line-1 fs30">{{item.name}}</view>
							<view class="fs24 color-666">{{item.create_time}}</view>
						</view>
						<view class="u-line-1 fs24 color-999">{{item.content||'暂时没有新的消息哦~'}}</view>
					</view>
				</view>
				<view class="ml104 h2 bg-f5f"></view>
			</block>
		</view>
		<!-- <u-modal v-model="clearShow" title="" content="确定清除所有未读消息吗？" showCancelButton /> -->
		<u-popup v-model="clearShow" width="550" mode="center" borderRadius="20">
			<view class="px60 pb40 pt88 flex-col col-center">
				<view class="fs32 fw-w">确定清除所有未读消息吗？</view>
				<view class="w-max mt60 flex row-between">
					<view class="w200">
						<u-button type="warning" @click="clear">确定</u-button>
					</view>
					<view class="w200">
						<u-button type="warning" plain @click="clearShow=false">取消</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clearShow: false,
				list: [],

				data: ""
			};
		},
		computed: {
			msgList() {
				let data = this.data||""
				let aa = [{
					icon: '/static/img/my/xtxx.png',
					title: '系统消息',
					content: data?.message?.title||'',
					count: data?.message?.unread||0,
					time: data?.message?.time||'',
					nav: '/pages/my/msg/system'
				}
				// , {
				// 	icon: '/static/img/my/kefu_msg.png',
				// 	title: '客服',
				// 	content: '请稍等，正在为您咨询...',
				// 	count: 1,
				// 	time: '12:36',
				// 	nav: ''
				// },
				]
				return aa
			}
		},
		onLoad() {
			// this.get_message()
		},
		onShow() {
			this.get_message()
			this.chatList()
		},
		methods: {
			chatList() {
				this.$request("/master/message/chatList").then(res => {
					this.list = res.data
				})
			},
			get_message() {
				this.$request("/master/message/index").then(res => {
					this.data = res.data
				})
			},
			clear() {
				this.$request("/master/message/clear").then(res => {
					// this.data = res.data
					this.get_message()
					this.clearShow = false
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
</style>
